
<template>
  <el-container class="user-container">
    <el-card class="box-card" shadow="hover" :style="{ padding: '30px' }">
      <div class="user-header">
        <img :src="user.avatar" alt="User Avatar" class="user-avatar" />
        <div>
          <h2>{{ user.name }}</h2>
          <p>{{ user.email }}</p>
        </div>
      </div>

      <el-divider>收藏餐厅</el-divider>

      <!-- 搜索功能 -->
      <el-input
          v-model="searchQuery"
          placeholder="搜索餐厅"
          clearable
          @input="searchRestaurant"
          class="search-bar"
          style="margin-bottom: 20px; width: 100%;"
      />

      <el-row :gutter="20">
        <el-col v-for="(restaurant, index) in filteredRestaurants" :key="restaurant.id" :span="8">
          <el-card class="box-card" shadow="hover" :style="{ height: '100%' }">
            <img :src="restaurant.image" alt="Restaurant Image" class="restaurant-image" />
            <div class="text-center">
              <h3>{{ restaurant.name }}</h3>
              <el-button @click="viewRestaurant(restaurant.id)" type="primary" size="small">查看详情</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      user: {
        name: '张少飞',
        email: '2225660941@qq.com',
        avatar: 'src/image/img.png',
        favoriteRestaurants: [
          { id: 1, name: '湘味木桶饭', image: 'src/image/restaurant_a.jpg' },
          { id: 2, name: '杨铭宇黄焖鸡', image: 'src/image/restaurant_b.jpg' },
          { id: 3, name: '塔斯汀中国汉堡', image: 'src/image/restaurant_c.jpg' },
          { id: 4, name: '东方匠作中国汉堡', image: 'src/image/img_1.png' }
        ]
      }
    }
  },
  computed: {
    filteredRestaurants() {
      if (!this.searchQuery) {
        return this.user.favoriteRestaurants;
      }
      return this.user.favoriteRestaurants.filter(restaurant =>
          restaurant.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    viewRestaurant(id) {
      this.$router.push(`/restaurant/${id}`)
    },
    searchRestaurant() {
      // 你也可以在这里做更多的异步操作，比如API请求
    }
  }
}
</script>

<style scoped>
.user-container {
  padding: 40px;
  font-size: 18px;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

.restaurant-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.text-center {
  text-align: center;
}

.search-bar {
  font-size: 16px;
}

.box-card {
  padding: 20px;
  font-size: 18px;
}
</style>
